import { onHide } from '@dcloudio/uni-app';
<!--
 * @Description:
 * @Date: 2024-05-14 09:00:16
 * @LastEditTime: 2024-08-26 16:00:10
-->
<route lang="json5" type="login">
{
  style: {
    navigationBarTitleText: '消息',
  },
}
</route>
<template>
  <view class="w-screen h-screen flex flex-col bg-#F4F6FA overflow-hidden p-20px box-border">
    <wd-form ref="form" class="w-100%" :model="model" :rules="rules">
      <wd-cell-group border>
        <wd-cell title="接收人签名" prop="acceptSignatureUrl">
          <view class="flex flex-col gap-20rpx">
            <wd-button size="small" icon="backtop" @click="handleSignature">上传签名照片</wd-button>
            <wd-img
              v-if="model.acceptSignatureUrl"
              :width="200"
              :height="100"
              :src="baseurl + model.acceptSignatureUrl"
              :enable-preview="true"
            />
          </view>
        </wd-cell>
        <wd-textarea
          label="备注"
          label-width="100px"
          type="textarea"
          v-model="model.acceptRemark"
          :maxlength="300"
          show-word-limit
          placeholder="请输入备注"
          clearable
          prop="acceptRemark"
          :rules="[{ required: true, message: '请输入备注' }]"
        />
      </wd-cell-group>
      <view class="footer">
        <wd-button class="bg-#0A4484" type="primary" size="large" @click="handleSubmit" block>
          提交
        </wd-button>
      </view>
    </wd-form>
  </view>
</template>

<script setup lang="ts">
import { upElectronicAPI } from '@/service/index/foo'
import { formatTime } from '@/utils/index'
import { useUserStore } from '@/store'
import { useToast } from 'wot-design-uni'
const form = ref()
const toast = useToast()
const userStore = useUserStore()

const baseurl = import.meta.env.VITE_SERVER_BASEURL
const electronicId = ref()
const model = reactive<{
  acceptSignatureUrl: string
  acceptRemark: string
}>({
  acceptSignatureUrl: '',
  acceptRemark: '',
})
const rules = {
  acceptSignatureUrl: [
    {
      required: true,
      message: '请上传接收人签名',
      validator: (value) => {
        if (value) {
          return Promise.resolve()
        } else {
          return Promise.reject(new Error('请上传接收人签名'))
        }
      },
    },
  ],
}
const handleSignature = () => {
  uni.navigateTo({ url: '/pages/ElectronicDelivery/Draw' })
}
onShow(() => {
  const pages = getCurrentPages()
  const currPage = pages[pages.length - 1] // 当前页的实例

  if (currPage.$vm.url) model.acceptSignatureUrl = currPage.$vm.url
})
onLoad((option) => {
  electronicId.value = option.id
})
function handleSubmit() {
  form.value
    .validate()
    .then(({ valid, errors }) => {
      console.log(valid)
      if (valid) {
        try {
          upElectronicAPI({
            ...model,
            id: electronicId.value,
            status: true,
          }).then((res) => {
            toast.success({
              msg: '操作成功',
              duration: 0,
            })
            setTimeout(() => {
              uni.navigateBack()
              toast.close()
            }, 1500)
          })
        } catch (error) {
          console.log(error)
        }
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}
</script>
<style lang="scss" scoped>
::v-deep .wd-button {
  width: 100%;
}
::v-deep .wd-cell__left {
  flex: none !important;
}
::v-deep .wd-cell__value {
  display: flex !important;
  justify-content: start !important;
}
::v-deep .wd-cell__value > .wd-button,
::v-deep .wd-cell__value > view > .wd-button {
  width: max-content !important;
  margin: 0 !important;
}
</style>
